/*
 * @Author: xiaosihan 
 * @Date: 2024-10-18 18:09:17 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-12-02 01:22:35
 */



import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./nameNum.module.less";
import nameNumStore from "./nameNumStore";
import Step1 from "./Step1/Step1";
import Step2 from "./Step2/Step2";
import Step3 from "./Step3/Step3";
import editorStore from "@/editorComponent/editorStore";

interface Iprops {
  children?: ReactNode
}

//名字加数字
export default function NameNum() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [step, setStep] = useState(nameNumStore.step);

  useEffect(() => {
    return () => {
      nameNumStore.setStep(1);
      editorStore.setAddName(false, 'front');
      editorStore.setAddNum(false, 'front');
    }
  }, []);

  useEffect(() => autorun(() => {
    setStep(nameNumStore.step);
  }, { delay: 10 }), []);

  return (
    <div
      ref={dom}
      className={styles.nameNum}
    >
      {step === 1 && <Step1 />}
      {step === 2 && <Step2 />}
      {step === 3 && <Step3 />}

    </div>
  );

}